<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>减肥</title>
</head>

<body>
  <!-- <h1>我要瘦到120斤！！</h1> -->

  <div id="box">

    <h1>路由！</h1>
    <!-- 
    <a href="#/login">登录</a>
    <a href="#/register">注冊</a> -->
    <router-link to="/login" tag="button">点击跳转登录</router-link>
    <router-link to="/register" tag="button">点击跳注册</router-link>
    <router-view></router-view>
    <!-- 显示路由的组件 -->
    <!-- <router-view></router-view> -->
    <!-- 在地址栏追加就可以显示不同内容 -->
    <!-- http://127.0.0.1:5500/vue/l1/%E8%B7%AF%E7%94%B1.html#/register -->
    <!-- http://127.0.0.1:5500/vue/l1/%E8%B7%AF%E7%94%B1.html#/login -->
    <!-- <login></login> -->
    <!-- <register></register> -->
    <!-- <a href="http://127.0.0.1:5500/vue/l1/router.html#/register">注册</a>
    <a href="http://127.0.0.1:5500/vue/l1/router.html#/login">登录</a> -->

  </div>
  <script src="/vue/lib/vue.js"></script>
  <!-- 引入vue路由文件 -->
  <script src="/vue/lib/vue-router.js"></script>
  <script>
    // 声明一个模板

    const login = {
      template: `<h1>登录</h1>`
    }
    const register = {
      template: `<h1>注册</h1>`
    }
    const wuxiao = {
      template: `<h1>请输入正确的网址</h1>
`
    }
    // 创建路由对象，定义路由规则
    const router = new VueRouter({
      routes: [
        // path路由的路径:路径对应的组件
        { path: '/login', component: login },
        // { path: '/login', components: login },
        { path: '/register', component: register },
        // redirect用来当做访问的时候的默认路有/的时候就是会跳转到指定的路由
        { path: '/', redirect: 'register' },
        // 当网址胡乱输入的时候，*代表通配符
        { path: '*', component: wuxiao }

      ]
    })
    var vue = new Vue({
      el: '#box',
      data: { mas: 12 },
      methods: {},
      router: router

      // 有了它声明的模板才能用
      // components: {
      //   login,
      //   register
      // }
    })
  </script>
</body>

</html>